import { useRef } from "react";
import { Modal } from "antd";
import { observer } from "Mobx-react";
import { modalState } from "@/stores/modalState";
import type { controlLogicType } from "@/types/index";
import ConcernSelect from "./ConcernSelect";
import { FrontContent } from "../stye";

function ConcernFront({ getFront }: { getFront: (front: controlLogicType) => void }) {
  const concernRef = useRef<any>();
  const handleCancel = (e: any) => {
    if (e.target.className != "ant-modal-wrap") modalState.isFront = false;
  };
  const handleOk = () => {
    const concern = concernRef.current.getConcern();
    getFront(concern);
    modalState.isFront = false;
  };

  return (
    <>
      {modalState.isFront && (
        <Modal title="题目向前关联" width="800px" open={modalState.isFront} onCancel={handleCancel} onOk={handleOk}>
          <FrontContent>
            <div className="front-title flex">
              <div className="front-text">当前题目：</div> {modalState.title}
            </div>
            <ConcernSelect childId={modalState.id} ref={concernRef}></ConcernSelect>
          </FrontContent>
        </Modal>
      )}
    </>
  );
}

export default observer(ConcernFront);
